<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <th:block th:include="include :: header('角色管理')"/>
    <th:block th:include="include :: dtree_css"/>
</head>
<body class="x-admin-sm">
<div class="x-nav">
          <span class="layui-breadcrumb">
            <a href="">首页</a>
            <a>
              <cite>字典管理</cite></a>
          </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <form class="layui-form layui-col-space5">
                        <div class="layui-inline layui-show-xs-block">
                            <input class="layui-input" autocomplete="off" placeholder="开始日" name="start" id="start">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <input class="layui-input" autocomplete="off" placeholder="截止日" name="end" id="end">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <input type="text" name="postName" placeholder="请输入用户名" autocomplete="off"
                                   class="layui-input">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <button class="layui-btn" lay-submit="" lay-filter="sreach"><i
                                    class="layui-icon">&#xe615;</i></button>
                        </div>
                    </form>
                </div>
                <div class="layui-card-body ">
                    <table class="layui-table" id="dictTypeTable" lay-filter="dictType_table_filter"></table>
                </div>
            </div>
        </div>
    </div>
</div>

<!--状态-->
<script type="text/html" id="switchStatus">
    <input style="font-size: 12px" type="checkbox" name="status" value="{{d.status}}" lay-skin="switch" lay-text="启用|暂停"
           lay-filter="dictStatusFilter" {{ d.status== 0 ? 'checked' : '' }}>
</script>

<script type="text/html" id="toolBarDictType">
    <div class="layui-card-header">
        <button class="layui-btn layui-btn-danger" lay-event="delAll"><i class="layui-icon"></i>批量删除
        </button>
        <button id="btnAddPost" class="layui-btn" lay-event="add"><i class="layui-icon"></i>添加</button>
    </div>
</script>
<script type="text/html" id="barDictType">
    <div>
        <a class="layui-btn layui-btn-xs layui-icon" lay-event="edit">&#xe642;编辑</a>
        <a class="layui-btn layui-btn-xs layui-btn-warm layui-icon" lay-event="addData">&#xe631;数据权限</a>
        <a class="layui-btn layui-btn-danger layui-icon" lay-event="del">&#x1006;删除</a>
    </div>
</script>
</body>
<script th:inline="javascript"> var ctx = [[@{/}]] </script>
<script>
    layui.use(['laydate', 'form', 'table'], function () {
        const form = layui.form;
        const table = layui.table;

        // 表格初始化
        const dictTypeTable = table.render({
            elem: '#dictTypeTable',
            url: ctx + 'system/dict/list',
            method: 'post',
            skin: 'line',
            even: true,
            page: {
                groups: 3,
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip']
            },
            toolbar: '#toolBarDictType',
            defaultToolbar: ['filter', 'print'],
            cols: [
                [
                    {type: 'checkbox', fixed: 'left'},
                    {field: 'dictName', title: '字典名称', width: '100px'},
                    {field: 'dictType', title: '字典类型', width: '100px'},
                    {field: 'createBy', title: '创建者', width: '100px'},
                    {field: 'status', title: '岗位状态', templet: '#switchStatus', width: '150px'},
                    {
                        field: 'createTime',
                        width: 200,
                        title: '创建时间',
                        sort: true,
                        templet: '<div>{{ layui.util.toDateString(d.createTime, "yyyy-MM-dd HH:mm:ss") }}</div>'
                    },
                    {title: '操作', width: 350, align: 'center', toolbar: '#barDictType'}
                ]
            ],
            parseData: function (res) {
                return {
                    "code": res.code,
                    "count": res.total,
                    "data": res.rows,
                }

            },
            request: {
                pageName: 'pageNum',
                limitName: 'pageSize'
            },
            done: function (res, curr, count) {
                //设置表格样式

                $(".layui-table").css({
                    "border": "1px solid #e2e2e2",
                    "border-top": "none",
                    "width": "100%"
                });
                $("thead").css("border-top", "1px solid #e2e2e2");
            },
        });


        //触发事件
        table.on('toolbar(dictType_table_filter)', function (obj) {
            switch (obj.event) {
                case 'add':
                    // layer.msg('添加被调用');
                    addPage(obj);
                    break;
                case 'delAll':
                    layer.msg('批量删除调用');
                    break;
            }
            ;
        });

        // 添加 框弹出
        function addPage(data) {
            layer.open({
                type: 2,
                area: ['600px', '500px'],
                fix: false, //不固定
                maxmin: true,
                shadeClose: true,
                shade: 0.4,
                title: '新增字典类型',
                content: ctx + "system/dict/add",
            });
        }


        //工具条事件
        table.on('tool(dictType_table_filter)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            const data = obj.data; //获得当前行数据
            const layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）

            if (layEvent === 'edit') {
                //查看
                // layer.msg('编辑按钮被调用')
                editPage(data);
            } else if (layEvent === 'del') {
                //删除
                layer.msg('删除按钮被调用')
            }
        });


        // 编辑页面弹出
        function editPage(_data) {
            // console.log(JSON.stringify(_data))
            console.log(_data.dictId)
            layer.open({
                type: 2,
                area: ['600px', '500px'],
                fix: false, //不固定
                maxmin: true,
                shadeClose: true,
                shade: 0.4,
                title: '编辑字典类型',
                method: 'get',
                content: ctx + "system/dict/edit?dictId=" + _data.dictId,
                success: function (layero, index) {
                    //获取当前打开的子页面id
                    const frameId = $(layero).find('iframe').attr("id");
                    //找到子页面的document对象
                    const document = window.frames[frameId].document;
                    //根据id找到子页面中相应的元素并赋值
                    $(document).find("#dictId").val(_data.dictId);
                }
            });
        }


    });
</script>

</html>